<div class="wrapper">
  <mat-card id="card" class="outter-card text-center">
    <mat-card-title>
      <b>Sign In</b>
    </mat-card-title>

    <mat-card-content>
      <form #loginForm="ngForm" class="sign-in-panel" (ngSubmit)="onSubmit(account.value, password.value)">
        <label for="account">Username or Email</label><br>
        <mat-form-field class="full-width">
          <input matInput type="text" #account ngModel name="account" required>
        </mat-form-field><br>

        <label for="password">Password</label><br>
        <mat-form-field class="full-width">
          <input matInput [type]="hide ? 'password' : 'text'" #password ngModel name="password" required>
          <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
        </mat-form-field><br>

        <div *ngIf="isLoginError" class="error-message">
          <p>*Incorrect account or password, Please try again.</p>
        </div>

        <button class="full-width" mat-raised-button color="primary" [disabled]="!loginForm.valid"
          type="submit">Login</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>